<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->

</head>
<body>

<div id="app">

    <h1>{{ title }}</h1>

    <div>
        <h2>elementUI 的button组件使用</h2>
        <el-button>默认按钮</el-button>
        <el-button size="mini" type="danger" icon="el-icon-search">主要按钮</el-button>
        <el-button type="success" icon="el-icon-plus">成功按钮</el-button>
        <el-button :plain="status" loading type="success">plain成功按钮</el-button>
        <el-button type="info" disabled>信息按钮</el-button>
        <el-button type="warning" :round="true">警告按钮</el-button>
        <el-button type="danger" :circle="true">1</el-button>

    </div>
    <div>
        <h2>日历组件使用</h2>
        <el-date-picker
                @change="dateChange"
                v-model="date"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
    </div>

    <p>
        1. elementui 组件库是饿了么前端团队开源的一个 pc 端的 vuejs 组件库。
        2. elementui 有两个大版本
        2.1 vue2 里面使用的，一般我们叫做 elementUI
        2.2 vue3 里面使用的，一般我们叫做 elementPlus

        https://element.eleme.cn/#/zh-CN
    </p>


</div>

</body>
<!--import Vue before Element  因为组件是基于 vue 所有 vuejs的引入必须在 elementuijs 前面。和 jquery 插件思想-->
<script src="lib/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            title: 'elementUI组件尝鲜！',
            status: true,
            date: '',

        },
        methods:{
            dateChange(value){
                console.log(this.date, value);
            }
        }
    })
</script>

</html>
